<template>
  <div>
    <el-row>
      <el-col :span="16">

        <el-tag>客户资料：{{ ids }}</el-tag>
        <el-row :gutter="0">
          <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="80px">
            <el-col :span="8">
              <el-form-item label="客户姓名" prop="name">
                <el-input v-model="formData.name" placeholder="请输入客户姓名" :maxlength="11" show-word-limit clearable
                          prefix-icon='el-icon-mobile' :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="手机号" prop="phone">
                <el-input v-model="formData.phone" placeholder="请输入手机号" clearable :style="{width: '100%'}">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="职业" prop="occupation">
                <el-select v-model="formData.occupation" placeholder="请输入职业" clearable :style="{width: '100%'}">
                  <el-option v-for="(item, index) in dict.type.occupation" :key="index" :label="item.label"
                             :value="item.value" :disabled="item.disabled"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="学历" prop="education">
                <el-select v-model="formData.education" placeholder="请输入学历" clearable :style="{width: '100%'}">
                  <el-option v-for="(item, index) in dict.type.education" :key="index" :label="item.label"
                             :value="item.value" :disabled="item.disabled"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="所在地区" prop="area">
                <el-cascader v-model="formData.area" :options="pro" @change="handBUin">

                </el-cascader>

              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="微信号" prop="weixin">
                <el-input v-model="formData.weixin" placeholder="请输入微信号" clearable :style="{width: '100%'}">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="年龄" prop="age">
                <el-input v-model="formData.age" placeholder="请输入年龄" clearable :style="{width: '100%'}">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="专业" prop="major">
                <el-select v-model="formData.major" placeholder="请输入专业" clearable :style="{width: '100%'}">
                  <el-option v-for="(item, index) in dict.type.major"
                             :key="index"
                             :label="item.label"
                             :value="item.value"
                             :disabled="item.disabled"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="在职情况" prop="job">
                <el-select v-model="formData.job" placeholder="请输入在职情况" clearable :style="{width: '100%'}">
                  <el-option v-for="(item, index) in dict.type.job" :key="index" :label="item.label"
                             :value="item.value" :disabled="item.disabled"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="当前薪资" prop="salary">
                <el-select v-model="formData.salary" placeholder="请输入当前薪资" clearable :style="{width: '100%'}">
                  <el-option v-for="(item, index) in dict.type.salary" :key="index" :label="item.label"
                             :value="item.value" :disabled="item.disabled"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="qq" prop="qq">
                <el-input v-model="formData.qq" placeholder="请输入qq" clearable :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="性别" prop="sex">
                <el-select v-model="formData.sex" placeholder="请输入性别" clearable :style="{width: '100%'}">
                  <el-option v-for="(item, index) in dict.type.sys_user_sex" :key="index" :label="item.label"
                             :value="item.value" :disabled="item.disabled"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="目标薪资" prop="expectedSalary">
                <el-select v-model="formData.expectedSalary" placeholder="请输入目标薪资" clearable
                           :style="{width: '100%'}">
                  <el-option v-for="(item, index) in dict.type.salary" :key="index" :label="item.label"
                             :value="item.value" :disabled="item.disabled"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="15">
              <el-form-item label="备注" prop="remark">
                <el-input v-model="formData.remark" type="textarea" placeholder="请输入备注"
                          :autosize="{minRows: 1, maxRows: 1}" :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>
            <!--        <el-col :span="24">-->
            <!--          <el-form-item size="large">-->
            <!--            <el-button type="primary" @click="submitForm">提交</el-button>-->
            <!--            <el-button @click="resetForm">重置</el-button>-->
            <!--          </el-form-item>-->
            <!--        </el-col>-->
          </el-form>
        </el-row>
        <el-tag>客户意向：</el-tag>
        <hr>
        <el-row :gutter="0">
          <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="80px">
            <el-col :span="8">
              <el-form-item label="意向学科" prop="subject">
                <el-select v-model="formData.subject" placeholder="请输入学科" clearable :style="{width: '100%'}"
                           @change="getSubject">
                  <el-option v-for="(item, index) in dict.type.course_subject" :key="index" :label="item.label"
                             :value="item.value" :disabled="item.disabled"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="意向课程" prop="courseId">
                <el-select v-model="formData.courseId" placeholder="请输入课程" :style="{width: '100%'}"
                           @change="getqiana">
                  <el-option v-for="item in getSubjetaa"
                             :key="item.value"
                             :label="item.name"
                             :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="意向金额" prop="qian">
                <el-input v-model="formData.price" placeholder="请输入学习原因" :style="{width: '100%'}"
                          :disabled="true">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="学习原因" prop="reasons">
                <el-input v-model="formData.reasons" placeholder="请输入学习原因" clearable :style="{width: '100%'}">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="职业计划" prop="plan">
                <el-input v-model="formData.plan" placeholder="请输入学习原因" clearable :style="{width: '100%'}">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="时间计划" prop="planTime">
                <el-date-picker
                  v-model="formData.planTime"
                  type="date"
                  placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="其他意向" prop="otherIntention">
                <el-input v-model="formData.otherIntention" placeholder="请输入年龄" clearable :style="{width: '100%'}">
                </el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
        <el-tag>添加沟通记录：</el-tag>
        <hr>
        <el-row :gutter="0">
          <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="80px">
            <el-col :span="8">
              <el-form-item label="跟进状态" prop="rconed">
                <el-select v-model="formData.rconed" placeholder="请输入跟进状态" clearable :style="{width: '100%'}">
                  <el-option v-for="(item, index) in dict.type.track_status" :key="index" :label="item.label"
                             :value="item.value" :disabled="item.disabled"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="下次跟进时间" prop="nextTime">
                <el-select v-model="formData.nextTime" placeholder="请输入课程" clearable :style="{width: '100%'}">
                  <el-option v-for="(item, index) in dict.type.course_subject" :key="index" :label="item.label"
                             :value="item.value" :disabled="item.disabled"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="沟通重点" prop="communicationPoint">
                <el-select v-model="formData.zd" placeholder="请输入沟通重点 " :style="{width: '100%'}" multiple>
                  <el-option v-for="(item, index) in dict.type.communication_point" :key="index" :label="item.label"
                             :value="item.value" :disabled="item.disabled"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="15">
              <el-form-item label="沟通纪要" prop="recond">
                <el-input v-model="formData.remark" type="textarea" placeholder="请输入备注"
                          :autosize="{minRows: 1, maxRows: 1}" :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="15">
              <el-button type="primary" @click="submitForm">保存</el-button>
              <!--          <el-button type="danger" @click="tranformBusiness">踢回公海</el-button>-->
              <!--          <el-button type="success" @click="tranformBusiness">转交成客户</el-button>-->
              <!--          <el-button type="info" @click="tranformBusiness">取消</el-button>-->
            </el-col>
          </el-form>
        </el-row>
      </el-col>
      <el-col :span="8">
        <track-list ref="trackId" :key="tracklistKeys" :id="id"></track-list>
      </el-col>
    </el-row>

  </div>
</template>


<script>
import {provinceAndCityData, codeToText, TextToCode} from "element-china-area-data";
import {getBusiness, updateBusiness, getSubject, getqian, baocuneBusiness} from "@/api/crm/business";
import TrackList from "@/views/crm/business/components/track-list";

export default {
  components: {TrackList},
  props: {
    id: {
      type: [String, Number]
    }
  },
  dicts: ['major', 'occupation', 'education', 'job', 'salary', 'sys_user_sex', 'course_subject', 'communication_point', 'track_status'],
  data() {
    return {
      getSubjetaa: [],
      pro: provinceAndCityData,
      ids: this.id,

      formData: {
        provinces: null,
        city: null,
        price: null,
        area: [],
      },
      rules: {
        name: [{
          required: true,
          message: '请输入客户姓名',
          trigger: 'blur'
        }, {
          pattern: /^1(3|4|5|7|8|9)\d{9}$/,
          message: '手机号格式错误',
          trigger: 'blur'
        }],
        phone: [{
          required: true,
          message: '请输入手机号',
          trigger: 'blur'
        }],
        occupation: [{
          required: true,
          message: '请输入职业',
          trigger: 'change'
        }],
        education: [],
        field105: [],
        weixin: [],
        age: [],
        major: [],
        job: [],
        salary: [],
        qq: [],
        sex: [],
        expectedSalary: [],
        remark: [{
          required: true,
          message: '请输入备注',
          trigger: 'blur'
        }],
      },
      tracklistKeys: 0,
    }
  },
  computed: {},
  watch: {
    id(newValue, oldValue) {
      this.ids = newValue;
      this.getBusines();
      this.tracklistKeys++
    }
  },
  created() {
    this.getBusines();
    console.log(this.formData)
    this.$refs.trackId.id = this.ids;
    this.$refs.trackId.getTrackList();
  },
  mounted() {
  },
  methods: {
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (valid) {
          baocuneBusiness(this.formData).then(res => {
            this.$modal.msgSuccess("操作成功");
            this.$refs.trackId.id = this.id;
            this.$refs.trackId.getTrackList();
          })
        }
        // TODO 提交表单
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    }, handBUin(value) {
      if (value && value.length > 0) {
        this.formData.provinces = codeToText[value[0]];
        this.formData.city = codeToText[value[1]];
      } else {
        this.formData.provinces = ''
        this.formData.city = ''
      }
    }, getBusines() {
      getBusiness(this.id).then(res => {
        this.formData = res.data;
        console.log(this.formData)
      })
      if (this.formData.city == this.formData.province) {
        this.formData.city = '市辖区'
      }
      //  城市文字转编码
      if (this.formData.provinces != '' && this.formData.city != '') {
        //这里的selectedOptions 对应着data里的selectedOptions
        this.formData.area = [TextToCode[this.params.provinces].code, TextToCode[this.params.provinces][this.params.city].code]
      }
    }, getSubject() {
      getSubject(this.formData.subject).then(resp => {
        this.getSubjetaa = resp.data;
      })
    }, getqiana(courseId) {
      let course = this.getSubjetaa.find(item => item.id == courseId)
      this.formData.price = course.price;
    }
  }
}

</script>
<style>
</style>
